import 'package:todo_app/constants/Screen.dart';
import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';

/// 带边框透明背景按钮
/// 
/// active状态下 边框是主题色 文字是主题色
/// 
/// disable状态下 边框是灰色 文字是灰色
class CustomOutlineButton extends StatefulWidget {
  CustomOutlineButton({Key? key, required this.child, this.disabled = false, this.bgColor, this.disabledBorderColor, this.borderColor, this.borderWidth, this.disabledBgColor, this.style, this.disabledStyle, required this.width, this.height, this.borderRadius, this.onTap, this.margin}) : super(key: key);

  final Widget child;
  final bool disabled;
  final double? borderWidth;

  final TextStyle? style;
  final Color? bgColor;
  final Color? borderColor;

  final Color? disabledBorderColor;
  final Color? disabledBgColor;
  final TextStyle? disabledStyle;

  final double width;
  final double? height;
  final double? borderRadius;
  final VoidCallback? onTap;
  final EdgeInsets? margin;

  @override
  _CustomOutlineButtonState createState() => _CustomOutlineButtonState();
}

class _CustomOutlineButtonState extends State<CustomOutlineButton> {
  @override
  Widget build(BuildContext context) {

    final ThemeData theme = Theme.of(context);
    final Color bgColor = widget.bgColor ?? Colors.transparent;
    final Color borderColor = widget.borderColor ?? theme.primaryColor;
    final Color disabledBorderColor = widget.disabledBorderColor ?? Color(0xFFA3A3A3);
    final Color disabledBgColor = widget.disabledBgColor ?? Colors.transparent;
    final TextStyle style = TextStyle(color: theme.primaryColor, fontSize: Screen.sizeByDesign(14)).merge(widget.style );
    final TextStyle disabledStyle = style.merge(TextStyle(color: Color(0xFFA3A3A3))).merge(widget.disabledStyle);
    final double borderWidth = widget.borderWidth ?? 1;
  
    return Container(
      margin: widget.margin,
      child: GestureDetector(
        onTap: widget.disabled ? null : widget.onTap,
        child: Container(
          alignment: Alignment.center,
          width: widget.width,
          height: widget.height,
          decoration: BoxDecoration(
            border: Border.all(
              color: !widget.disabled ? borderColor : disabledBorderColor,
              width: borderWidth
            ),
            color: !widget.disabled ? bgColor : disabledBgColor,
            borderRadius: BorderRadius.circular(widget.borderRadius ?? widget.width / 2)
          ),
          child: AnimatedDefaultTextStyle(
            style: !widget.disabled ? style : disabledStyle,
            duration: Duration(milliseconds: 150),
            child: widget.child,
          )
        )
      )
    );
  }
}